#header {
	color: black;
	.navigation {
		font-size: 12px;
	}
	.logo {
		width: 300px;
	}
}
// &表示父选择器
.clearfix {
	display: block;
	zoom: 1;

	&:after {
		content: ' ';
		display: block;
		font-size: 0;
		height: 0;
		clear: both;
		visibility: hidden;
	}
}

// 不能有空格,必须紧挨着
.button {
	color: 'red';
	& ok {
		background-image: url('ok.png');
	}
	&-cancel {
		background-image: url('cancel.png');
	}

	&-custom {
		background-image: url('custom.png');
	}
}

.link {
	& + & {
		color: red;
	}

	& & {
		color: green;
	}

	&& {
		color: blue;
	}

	&,
	&ish {
		color: cyan;
	}
}

// & 代表所有父选择器（不仅仅是最近的祖先），因此以下示例：

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

// & 还可以用于生成逗号分隔列表中选择器的每个可能的排列：
p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}